<template>
  <div class="home app_content">
    <!-- 导航栏 -->
    <div class="header_body">
      <header-nav :leftArrow="true" titelText="指南详情"></header-nav>
    </div>
    <carousel-card
			v-if="info.book.imgs && info.book.imgs.length"
			v-model:carouselList="info.book.imgs"
		></carousel-card>

    <div class="content">
      <div class="title">{{ info.book.title }}</div>
      <div style="margin-top: 20px;color: #666;font-size: 14px;line-height: 24px;height: 300px;overflow: hidden;overflow-y:scroll;">{{ info.book.content }}</div>
    </div>
    <!-- 底部 -->
    <div class="footer_body">
      <footer-nav></footer-nav>
    </div>
  </div>
</template>

<script setup name="Video">
import { getGuide } from "@/api/http.js";
const router = useRouter();
const { useHome } = $globalStore;
const route = useRoute();

let info = reactive({
    plans: [],
    title: '',
    show: false,
    book: {}
})

const playVideo = (plan) => {
  info.show = true
  info.cur = plan;
}


onMounted(() => {
  getGuide().then(res => {
    info.book = res.data.find(v => v.id == route.params.type)
    if (info.book.imgs) {
      let imgs = JSON.parse(info.book.imgs)
      info.book.imgs = imgs.map(v => {
        return {
          image: v,
          width: "100vw",
          height: "300px",
        }
      })
    }
    info.book.content = JSON.parse(info.book.content)
    console.log(JSON.stringify(info.book))
  })
});
</script>

<style lang="less" scoped>
.home {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;

}
.content {
  width: 90%;
  margin-left: 5%;
  margin-top: 12px;

  .title {
    width: 100%;
    text-align: center;
    font-size: 16px;
  }
  .nr {
    font-size: 14px;
  }

    .each-food {
      display: flex;
      width: 90%;
      margin: 20px 5%;
      font-size: 16px;
      font-weight: bold;
      align-items: center;
      color: #666;
      margin-top: 12px;
      img {
        width: 34px;
        height: 34px;
        margin-right: 20px;
        border-radius: 6px;
      }
    }
}
</style>
